// rec
import React, { Component } from "react";
import { Button, Form, Input, Spin, Card, message } from "antd";
import { MailOutlined, LockOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import "./login.css";
import { _login, _selRegisterCode } from "../../util/api/user/index";

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isshow: false,
      isLoading: false,
      isShoweye: true,
    };
  }
  componentDidMount() {
    _selRegisterCode()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          console.log(res.data);
          if (res.data.data[0].is_register) {
            this.setState({
              isshow: true,
            });
          }
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器异常");
      });
  }
  onFinish = (userData) => {
    this.setState({ isLoading: true });
    _login(userData)
      .then((res) => {
        if (res.status === 200) {
          this.setState({ isLoading: false });

          if (res.data.code === 0) {
            let userData = res.data.data;
            let basicUser = {
              user_cname: userData.user_cname,
              user_code_id: userData.user_code_id,
              user_email: userData.user_email,
              user_git: userData.user_git,
              user_gender: userData.user_gender,
              user_grade: userData.user_grade,
              user_name: userData.user_name,
              user_study_dir: userData.user_study_dir,
              user_type: userData.user_type,
            };
            let c_user = {
              user_id: userData.user_id,
              user_img: userData.user_img,
              isadmin: userData.isadmin,
            };
            let d_user = {
              user_introduce: userData.user_introduce,
            };
            localStorage.setItem("b_user", JSON.stringify(basicUser));
            localStorage.setItem("c_user", JSON.stringify(c_user));
            localStorage.setItem("d_user", JSON.stringify(d_user));
            sessionStorage.setItem(
              "token",
              JSON.stringify(res.data.data.token)
            );
            message.success("登录成功", 1).then(() => {
              this.props.history.push("/m/index");
            });
          } else {
            //登录失败
            console.log(res.data);
            message.error("密码错误或用户不存在");
          }
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  inputOnblur = () => {
    this.setState({ isShoweye: true });
  };
  inputFocus = () => {
    this.setState({ isShoweye: false });
  };
  render() {
    return (
      <div className="login-div">
        <Spin tip="Loading..." spinning={this.state.isLoading}>
          <div className="login-container">
            <div className={this.state.isShoweye ? "owl" : "owl password"}>
              <div class="hand"></div>
              <div class="hand hand-r"></div>
              <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
              </div>
            </div>
            <Card
              title="IMU-AI"
              bordered={true}
              style={{ width: 400 }}
              extra={
                this.state.isshow ? <Link to="ai_register">注册</Link> : null
              }
            >
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                  remember: true,
                }}
                onFinish={this.onFinish}
              >
                <Form.Item
                  name="user_email"
                  rules={[
                    {
                      type: "email",
                      message: "此邮箱无效!",
                    },
                    {
                      required: true,
                      message: "请输入你的邮箱!",
                    },
                  ]}
                >
                  <Input
                    prefix={<MailOutlined className="site-form-item-icon" />}
                    placeholder="邮箱"
                    size="large"
                  />
                </Form.Item>
                <Form.Item
                  name="user_pwd"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  rules={[
                    {
                      required: true,
                      message: "请输入密码!",
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="密码"
                    onFocus={this.inputFocus}
                    onBlur={this.inputOnblur}
                    size={"large"}
                  />
                </Form.Item>

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                    block
                    size="large"
                  >
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </Card>
          </div>
        </Spin>
      </div>
    );
  }
}
export default Login;
